<template>
	<view class="content an-sign-info">
		<view class="an-top-bg">
			<!-- 用户信息 -->
			<view class="an-userInfo">
				<view class="an-user-image">
					<image style="width: 80px; height: 80px; background-color: #eeeeee;" mode="aspectFit" :src="defaultData.avatarurl"
						@error="imageError"></image>
				</view>
				<view class="an-user-text">
					<view>
						<h3>{{defaultData.nickname}}</h3>
						<p>最近打卡:{{defaultData.logintime}}</p>
					</view>
				</view>
			</view>
		</view>
		
		<view class="an-radius-body">
			
			<uni-segmented-control :current="current" :values="tabItems" style-type="button" active-color="#883ffe" @clickItem="onClickItem" />
			
			<view v-show="current === 0">
				
				<uni-swipe-action v-for="item in list" :key="item.id" :options="isOptions" @click="bindClick" @change="change(item)" >
					<uni-list-item 
					@tap="clickList(item)"
					:show-arrow="false"
					:title="item.address" 
					:note="item.time" />
				</uni-swipe-action>
				
				<uni-load-more :loadingType="loadingType" v-if="total>6 || total==0"></uni-load-more>
			</view>
			<view v-show="current === 1">
				
				<map style="width: 100%; height: 550px;" :latitude="latitude" :longitude="longitude" :markers="covers"  :include-points="mappoint">
				                </map>
			
			</view>
			
		</view>
	</view>
</template>
<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {mapState} from 'vuex'
	export default{
		components: {
			uniSwipeAction,
			uniSegmentedControl,
			uniLoadMore,
			uniList,
			uniListItem
		},
		data(){
			return{
				defaultData:{},
				postData:{
					page:1,
					pageSize: 10,
					openid:'',	// 用户编码
				},
				list:[],
				total:0,
				options: [{	// 滑动菜单
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				activeItem:{}, // 操作中的列表
				loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了
				tabItems: [
					'列表展示',
					'地图展示'
				],
				current: 0,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{	//标记点用于在地图上显示标记的位置
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/img/location.png',
					callout:{
						content: '测试'
					}
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/img/location.png'
				}],
				mappoint: [],  //定位坐标
			}
		},
		computed: {
		    ...mapState(['userInfo']),
			isOptions(){	// 是否可滑动
				if(this.userInfo.grade == 3){
					return this.options
				}
			}
		},
		onLoad(e){
			try{
				this.defaultData = JSON.parse(decodeURIComponent(e.detailDate));
			}catch(err){
				this.defaultData = JSON.parse(e.detailDate); // 防止URl解码报错
			}
			this.postData.openid = this.defaultData.openid
			this.getList();
		},
		methods:{
			getList(page){
				this.loadingType = 1
				if(page){
					this.postData.page = page
				}
				if(this.postData.page === 1){
					this.list = []
				}
				this.$api.wxGetUserSign(this.postData).then(res=>{
					this.list.push(...res.list); 
					this.total = res.total
					this.loadingType = 0
					this.showMap()
				})
			},
			onReachBottom() {	// 页面到底 触发
				if (this.loadingType !== 0) {
					return;
				}
				if(Math.ceil(this.total/this.postData.pageSize)>this.postData.page && this.total != 0 ){
					this.postData.page += 1
					this.getList()
				}else{
					this.loadingType = 2
				}
			},
			showMap(){	// 地图上面显示定位点
				let newdata = this.list;
				let newmapdata = [];
				let newmappoint = [];
				let newPolyline = [];
				for(let i= 0;i<newdata.length; i++){
				  if (newdata[i].longitude != null && newdata[i].latitude != null){
					newmapdata.push({
						id:newdata[i].id,
						iconPath: '../../static/img/location.png',
						longitude: newdata[i].longitude,
						latitude: newdata[i].latitude,
						width:'50',
						height:'50',
						callout:{
							content: newdata[i].time
						}
					});
					newmappoint.push({
						longitude: newdata[i].longitude,
						latitude: newdata[i].latitude,
					});
				  }
				}
				this.covers = newmapdata
				this.mappoint = newmappoint
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
			change(item){	// 滑块操作触发
				this.activeItem = item
			},
			bindClick(e) {
				let nd = {
					ids: this.activeItem.id
				}
				this.$api.wxDeleteSign(nd).then(res=>{
					uni.showToast({
						title: `删除成功`,
					})
					this.getList(1);
				})
			},
		}
	}
</script>
<style lang="scss">
.an-sign-info{
	
	.an-top-bg{
		padding-top:30px;
		height:150px;
		.an-userInfo{
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.an-user-image{
				width: 80px;
				height: 80px;
				margin: 0;
			}
			.an-user-text{
				text-align: center;
			}
		}
	} 
	.an-radius-body{
		top:170px;
	}
	.segmented-control{
		margin-top: 20px;
		margin-bottom: 10px;
	}
}
</style>